<template>
	<div class="fashion-article">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				达人文章
			</div>
			<div class="right"
				@click="Refresh()"
			>
				<i class="iconfont">&#xe6a1;</i>
			</div>
		</div>
		<div class="no-place"></div>
		<div class="banner">
			<img v-lazy="list.article_banner" />
		</div>
		<div class="fa-content">
			<h1>{{list.name}}</h1>
			<div class="fa-header">
				<div class="header-left">
					<img v-lazy="list.head_img" />
					<p class="name">{{list.talent_name}}</p>
					<p class="time">{{time}}</p>
				</div>
				<div class="header-right">
					<i class="iconfont">&#xe62f;</i>
					<span>{{list.readtimes}}</span>
				</div>
			</div>
		</div>
		<div class="mid-line"></div>
		<div class="fa-con">
			<p class="title">「 {{list.shorttitle}} 」</p>
			<div>
				<div v-html="list.article"></div>
			</div>
		</div>
		<div class="end">end~</div>
		<div class="float-btn">
			<div class="btn"
				@click="show()"
			>
				<p>达人<br>清单</p>
			</div>
			<div class="btn"
				@click="goIndex()"
			>
				<p>返回<br>首页</p>
			</div>
		</div>
		<div class="float-goods"
			v-if="goodsShow"
			@click="hide()"
		>			
			<div class="fg-content"
				@click.stop="goodsShow = true"
			>
				<h1>达人清单</h1>
				<ul>					
					<li v-for="(goods, index) in goodsList"
						@click="goDetail(goods)"
					>
						<img v-lazy="goods.itempic" />
						<div class="goods-right">
							<p class="title">{{goods.itemshorttitle}}</p>
							<p class="price">券后<span>{{goods.itemendprice}}</span>元</p>
							<div class="goods-bottom">
								<p>券 ￥{{goods.couponmoney}}</p>
								<p>已售{{goods.itemsale}}</p>
							</div>
						</div>
					</li>
				</ul>				
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import * as types from '../store/types.js'
	export default{
		data(){
			return{
				id: this.$route.params.id,
				list: [],
				time: '',
				article: '',
				goodsList: [],
				goodsShow: false
			}
		},
		mounted(){
			this.getData()
		},
		updated(){
			this.getClick()
		},
		methods: {
			Refresh: function(){
				this.getData();
				this.getClick();
			},
			getData(){
				var params = new URLSearchParams;
				params.append('id', this.id)
				axios.post(Http.TALENTARTICLE, params)
				.then( res => {
					var ret = res.data;
					this.list = ret.data;
					this.time = types.timeStamp(false, this.list.checktime);
					this.goodsList = ret.data.items;
				})				
			},
			getClick(){
				var cc = document.querySelectorAll("[id^='itemid']");		
				for(var i=0,len=cc.length;i<len;i++){
					var cid = cc[i]['id'];
					var itemid = 0;
					cc[i]['itemid'] = cid.substring(cid.indexOf("d")+1,cid.length);					
					cc[i].onclick = function(cc){
						this.$router.push('/product/detail/' + this.itemid + "?type=2&is_collect=0")
					}
				}
			},
			goDetail: function(goods){
				this.$router.push({
					path: '/product/detail/' + goods.itemid,
					query: {
                        type: 2,
                        is_collect: 0
					}
				})	
			},
			goIndex: function(){
				this.$router.push('/#/')
			},
			show: function(){
				this.goodsShow = true;
				document.getElementsByClassName("fashion-article")[0].style.position="fixed";
			},
			hide: function(){
				this.goodsShow = false;
				document.getElementsByClassName('fashion-article')[0].style.position="relative";
			}
		}
	}
</script>
<style lang="scss" scoped>
	.fashion-article{
		text-align: left;
		background: #fafafa;
		.com-header{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: #fff;
			width: 100%;
		}
		.fa-content{
			margin: 0 0.2rem;
			margin-top: 0.4rem;
			h1{
				margin-bottom: 0.3rem;
				font-size: 0.3rem;
				font-weight: 600;
			}
			.fa-header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.header-left{
					display: flex;
					align-items: center;
					img{
						margin-right: 0.14rem;
						width: 0.66rem;
						height: 0.66rem;
						border-radius: 0.66rem;
					}
					.name{
						font-size: 0.26rem;
						margin-right: 0.14rem;
					}
					.time{
						font-size: 0.20rem;
						color: #999;
					}
				}
				.header-right{
					display: flex;
					align-items: center;
					color: #999;
					i,span{
						height: 0.4rem;
						line-height: 0.4rem;
					}
					i{
						margin-right: 0.1rem;
					}
				}
			}
		}
		.mid-line{
			margin: 0.4rem 0;
			margin-left: 0.2rem;
			width: 1rem;
			height: 0.02rem;
			background: #333;
		}
		.fa-con{
			text-align: left;
			width: 94%;
			margin: 0 3%;
			color: #564d49;
			img{
				width: 100%;
			}
			.title{
				margin-bottom: 0.3rem;
			}
		}
		.end{
			padding-bottom: 0.6rem;
			width: 100%;
			height: 0.6rem;
			line-height: 0.6rem;
			text-align: center;
		}
		.float-btn{
			position: fixed;
			bottom: 0.2rem;
			right: 0.2rem;
			z-index: 2;
			.btn{
				display: flex;
				align-items: center;
				margin-bottom: 0.2rem;
				width: 0.8rem;
				height: 0.8rem;
				border-radius: 0.8rem;
				background: #fb7061;
				color: #fff;
				text-align: center;
				line-height: 0.3rem;
				font-size: 0.20rem;
				p{
					width: 100%;
				}
			}
		}
		.float-goods{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			height: 100%;
			background: rgba(54,54,64,0.8);
			.fg-content{
				position: absolute;
				top: 30%;
				height: 70%;
				width: 100%;
				background: rgba(256,256,256,0.8);
				border-radius: 0.2rem 0.2rem 0 0;
				h1{
					font-size: 0.28rem;
					line-height: 0.88rem;
					margin: 0 0.24rem;
				}			
				ul{
					height: 8rem;
					overflow-y: scroll;
					overflow-x: hidden;
					margin: 0 0.2rem;
					&::-webkit-scrollbar{
						display: none;
					}					
					li{
						margin-bottom: 0.2rem;
						display: flex;
						align-items: flex-start;
						background: #fff;
						img{
							width: 1.6rem;
							margin-right: 0.2rem;
						}
						.goods-right{
							flex: 1;
							margin-right: 0.2rem;
							.title{
								margin-top: 0.1rem;
								font-size: 0.28rem;
							}
							.price{
								margin: 0.2rem 0;
								font-size: 0.24rem;
								span{
									margin: 0 0.1rem;
									color: #fb7061;
									font-size: 0.30rem;
								}
							}
							.goods-bottom{
								display: flex;
								justify-content: space-between;
							}
						}
					}
				}
				
			}
		}
	}
</style>